<template>
  <div class="area-table-item">
    <el-table
      v-if="tableData.length"
      :data="tableData.slice((currentPage-1) * pageSize, currentPage * pageSize)"
      :row-class-name="tableRowClassName"
      class="default-scroll-table"
      size="mini"
      border
      header-row-class-name="table-header"
      @row-click="setShowCity">
      <el-table-column
        :label="dataType === 'province'? '省份':'城市'"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <div v-if="dataType === 'province' && scope.row.Province">
            <el-tooltip v-if="scope.row.Province.Name && scope.row.Province.Name.length > 4" class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.Province.Name }}</div>
              <div :class="{'selected':activeIndex === scope.$index}" class="province-name" >
                <span v-if="scope.row.Province.Name === '总体'">全国</span>
                <span v-else>{{ scope.row.Province.Name || '--' }}</span>
              </div>
            </el-tooltip>
            <div v-else :class="{'selected':activeIndex === scope.$index}" class="province-name" >
              <span v-if="scope.row.Province.Name === '总体'">全国</span>
              <span v-else>{{ scope.row.Province.Name || '--' }}</span>
            </div>
          </div>
          <div v-else-if="dataType === 'city'">
            <el-tooltip v-if="dataType === 'city' && scope.row.Name && scope.row.Name.length > 4" class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.Name }}</div>
              <div class="city-name">{{ scope.row.Name || '--' }}</div>
            </el-tooltip>
            <div v-else-if="dataType === 'city'" class="city-name">{{ scope.row.Name || '--' }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="用户数"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <el-tooltip v-if="dataType === 'province' && scope.row.Province" :content="scope.row.Province.Num.toString()" placement="top">
            <div :class="{'selected':activeIndex === scope.$index}">{{ scope.row.Province.Num | tableDatafilter }}</div>
          </el-tooltip>
          <el-tooltip v-if="dataType === 'city'" :content="scope.row.Num.toString()" placement="top">
            <div v-if="dataType === 'city'">{{ scope.row.Num | tableDatafilter }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <empty-placeholder v-else style="margin-bottom: 24px" />
    <div v-if="tableData && tableData.length > 0 && totalPage > 1" class="pagination">
      <div :class="{'disabled': currentPage === 1}" class="prev" @click="handleCurrentChange(currentPage - 1)"><img src="../../assets/mengli/prev.png" alt=""> </div>
      <div class="content">
        <span class="current">{{ currentPage }}</span>
        <span class="total-page">/{{ totalPage }}</span>
      </div>
      <div :class="{'disabled': currentPage === totalPage}" class="next" @click="handleCurrentChange(currentPage + 1)"><img src="../../assets/mengli/next.png" alt=""></div>
    </div>
  </div>
</template>
<script>
import { isNumber } from '@/utils/tools';
import { moneyFilter, numberTextFormat } from '@/filters/number';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
export default {
  name: 'AreaPortrait',
  components: { EmptyPlaceholder },
  filters: {
    tableDatafilter(val) {
      if (!isNumber(val)) {
        return val || '--';
      } else {
        return moneyFilter(numberTextFormat(val, 1), false);
      }
    }
  },
  props: {
    dataType: {
      type: String,
      default: 'province'
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 20
    };
  },
  computed: {
    totalPage() {
      if (this.tableData) {
        const total = this.tableData.length;
        return Math.ceil(total / this.pageSize);
      }
      return 0;
    }
  },
  methods: {
    setShowCity(item, column, e) {
      if (this.dataType === 'province') {
        this.$emit('setShowCity', { index: item.$index, clientY: e.clientY - (e.layerY || 0), city: item.City || [] });
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.$index = rowIndex;
      const c = this.dataType === 'province' ? 'pointer' : '';
      return rowIndex % 2 ? `double-row ${c}` : `single-row ${c}`;
    },
    handleCurrentChange(val) {
      if (val <= 0 || val > this.totalPage) return;
      this.currentPage = val;
      if (this.dataType === 'province') {
        this.$emit('handleCurrentChange', (val - 1) * this.pageSize);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.area-table-item {
  .selected {
    font-weight: bold !important;
  }
  .item-header {
    font-size:20px;
    font-weight:400;
    color:rgba(51,51,51,1);
    padding: 0 8px;
    margin: 0 0 16px;
    border-left: 4px solid rgba(64,110,255,1);
  }
  .province-name {
    font-weight:400;
    color:rgba(64,110,255,1);
    cursor: pointer;
    font-family:PingFangSC-Regular,PingFang SC;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .city-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  ::v-deep .el-table {
    .table-header {
      .is-leaf {
        border-left: 1px solid #fff;;
        border-right: none;
        border-bottom: 1px solid transparent;
        &:first-child{
          border-left: none;
        }
      }
    }
    .table-header > th {
      background: #85A2FF;
      font-size:14px;
      padding: 2px 0;
      &> .cell {
        color: white;
      }
    }
    .double-row {
      background: #CED5F6;
      &:hover {
        td {
          background: #CED5F6;
        }
      }
    }
    .single-row {
      background: #EAEDFF;
      padding: 0;
      &:hover {
        td {
          background: #EAEDFF;
        }
      }
    }
    .double-row, .single-row  {
      &.pointer {
        cursor: pointer;
      }
      td {
        font-size: 14px;
        padding: 2px 0;
        line-height: 1.2;
        border-left: 1px solid #fff;
        border-right: none;
        border-bottom: 1px solid transparent;
        &:first-child{
          border-left: none;
        }
      }
    }
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 17px;
    .content {
      margin: 0 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      .current {
        color: #333333;
      }
      .total-page {
        color: #999999;
      }
    }
    .prev,.next {
      width: 16px;
      height: 16px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
      &.disabled {
        cursor: not-allowed;
        opacity: .2;
      }
    }
  }
}

</style>
